<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div style="display: flex;align-items: center;flex-wrap:wrap; padding-left: 14px; padding-right: 14px;">
            <el-card class="s-item">
                <div style="font-size: 13px; display: flex;align-items: center; justify-content: center" @click="showView('site-cash')">
                    <span>提现申请：</span><span style="font-size: 20px; color: red">{{ counts.cashCount }}</span>
                </div>
            </el-card>
            <el-card class="s-item">
                <div style="font-size: 13px; display: flex;align-items: center; justify-content: center" @click="showView('order-return')">
                    <span>退货申请：</span><span style="font-size: 20px; color: red">{{ counts.returnCount }}</span>
                </div>
            </el-card>
        </div>

        <div style="display: flex;align-items: center;flex-wrap:wrap; padding-left: 14px; padding-right: 14px;">
            <el-card :class="'box-card s-item ' + (item.count > 0 ? ' s-item-green ' : ' ') + (selectedId === item.id ? ' s-item-blue ' : '')" v-for="item in statistics" :key="item.id">
                <div @click="switchId(item.id)">
                    <div>{{item.name}}</div>
                    <div><span title="未处理">{{ item.count }}</span> / <span title="总数">{{item.totalCount}}</span> / <span title="设置订单上限" @click="showMaxOrderCount(item)">{{ item.maxOrderCount }}</span></div>
                </div>
            </el-card>
        </div>

        <div style="display: flex;align-items: center;flex-wrap:wrap">
            <el-card class="box-card" v-for="item in list" :key="item.orderId" style="width: 400px; margin: 20px; font-size: 14px">
                <div slot="header" class="clearfix">
                    <span>{{ item.createTime }}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="showDetail(item.orderId)">查看</el-button>
                </div>
                <div>
                    <table>
                        <tr>
                            <th align="right">订单号：</th>
                            <td>{{ item.orderId }}</td>
                        </tr>
                        <tr>
                            <th align="right">地址：</th>
                            <td>{{ item.address }}</td>
                        </tr>
                        <tr>
                            <th align="right">门牌号：</th>
                            <td>{{ item.houseNo }}</td>
                        </tr>
                        <tr>
                            <th align="right">联系人：</th>
                            <td>{{ item.contacts }} - {{ item.contactNumber }}</td>
                        </tr>
                    </table>
                </div>
            </el-card>
        </div>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" append-to-body>
            <div style="text-align: center">
                <el-table :data="detail.items" border stripe highlight-current-row style="width: 100%" size="mini">
                    <el-table-column type="index" header-align="center" align="center" width="60px"/>
                    <el-table-column prop="depotNo" label="库存编码" header-align="center" align="center"/>
                    <el-table-column prop="name" label="商品名称" header-align="center" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.returnStatus === 0 || scope.row.returnStatus === 3">{{scope.row.promotion.name }}</span>
                            <span v-if="scope.row.returnStatus === 1" style="color: orangered">[已申请退货]{{scope.row.promotion.name }}</span>
                            <span v-if="scope.row.returnStatus === 2" style="color: red">[已退货]{{scope.row.promotion.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unitPrice" label="单价" header-align="center" align="center" width="70px;"/>
                    <el-table-column prop="weight" label="重量(克)" header-align="center" align="center" width="70px;"/>
                    <el-table-column prop="price" label="售价" header-align="center" align="center" width="85px;"/>
                    <el-table-column prop="promotion" label="促销类型" header-align="center" align="center" width="70px">
                        <template slot-scope="scope">
                            {{ scope.row.promotion === 0 ? '无' : (scope.row.promotion === 1 ? '特价' : '限购')}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="promotionPrice" label="促销价" header-align="center" align="center" width="65px"/>
                </el-table>
                <el-button type="primary" style="margin-top: 20px; width: 200px;" :loading="printerLoading" @click="printerIng"> 打印</el-button>
                <el-button type="success" style="margin-top: 20px; width: 200px;" :loading="completeLoading" @click="complete"> 完成</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {statisticsByToday, orderWaitList, orderDetail, completeOrder, getWaitHandleData, printer} from "../../api/order/order";
    import {setDis} from "../../api/config/distime"

    export default {
        name: 'Home',
        data() {
            return {
                loading: false,
                printerLoading: false,
                completeLoading: false,
                dialogVisible: false,
                title: '',
                statistics: [],
                counts: {
                    returnCount: 0,
                    cashCount: 0
                },
                selectedId: null,
                list: [],
                detail: {
                    order: {},
                    items: []
                }
            }
        },
        mounted() {
            let _this = this
            _this.loadStatistics()
            _this.loadWaitHandleData()
            setInterval(function () {
                _this.loadStatistics()
            }, 5000)
            setInterval(function () {
                _this.loadWaitHandleData()
            }, 10000)
        },
        methods: {
            showView(name) {
                this.$router.replace({name: name})
            },
            async loadStatistics() {
                let res = await statisticsByToday();
                if (res.code !== '0') return null;
                this.statistics = res.data
                if (!this.selectedId) {
                    this.selectedId = this.statistics[0].id
                }
                this.loadWaitList()
            },
            async loadWaitHandleData() {
                let res = await getWaitHandleData();
                if (res.code !== '0') return null;
                this.counts = res.data
            },
            switchId(id) {
                this.selectedId = id
                this.loadWaitList(id);
            },
            async loadWaitList() {
                this.list = [];
                let res = await orderWaitList(this.selectedId);
                if (res.code !== '0') return null;
                res.data.forEach(item => {
                    this.list.push(item)
                })
            },
            async showDetail(id) {
                this.title = "订单号：" + id;
                this.loading = true
                let res = await orderDetail(id)
                this.loading = false
                if (res.code !== "0") return

                this.detail = res.data
                this.dialogVisible = true
            },
            async printerIng() {
                this.printerLoading = true;
                this.detail.printerName = "XP-58"
                let res = await printer(this.detail)
                this.printerLoading = false;

                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '打印成功!'
                });
            },
            async complete() {
                this.completeLoading = true;
                let res = await completeOrder(this.detail.order.orderId);
                this.completeLoading = false;

                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '完成成功!'
                });
                this.loadWaitList()
                this.dialogVisible = false
            },
            showMaxOrderCount(item) {
                this.$prompt('请输入最大订单数', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputType: 'number',
                    inputValue: item.maxOrderCount
                }).then(({value}) => {
                    this.setDisIng(item, value)
                });
            },
            async setDisIng(item, maxOrderCount) {
                this.loading = true
                let res = await setDis(item.id, maxOrderCount);
                this.loading = false
                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '设置成功!'
                });
                this.loadStatistics()
            }
        }
    }
</script>

<style scoped>
    td {
        height: 24px;
        line-height: 24px;
    }

    .s-item {
        width: 180px;
        margin: 6px;
        font-size: 22px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }

    .s-item-green {
        background-color: lightgreen;
        color: red;
    }

    .s-item-blue {
        background-color: dodgerblue;
        color: white;
    }

    .s-item-blue-red {
        background-color: dodgerblue;
        color: red;
    }

    >>> .el-card__body {
        padding: 10px;
    }
</style>
